
<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'

const str = ref('abc')
const num = ref(100)
// 侦听器侦听单个数据
/* watch(str, (newval) => {
  console.log(newval)
})
watch(num, (newval) => {
  console.log(newval)
}) */
// 侦听多个数据
/* watch([str, num], (vals) => {
  console.log(vals)
}, { immediate: true })
 */
//watchEffect 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
watchEffect(() => {
  console.log(str.value, num.value)
})
</script>
<template>
  <div>
    {{ str }} <button @click="str += 'a'">修改字符串</button>
    <br>
    - {{ num }} <button @click="num++">修改字符串</button>
  </div>
</template>



<style scoped>
</style>